{% extends "base.html" %}
<!-- 定义页面标题 -->
{% block title %}AI聊天 - AI文本生成系统{% endblock %}

{% block content %}
<!-- 侧边栏 - 对话列表 -->
<div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
    <!-- 新建对话按钮区域 -->
    <div class="p-3 border-b border-gray-700">
        <!-- 新建对话按钮 -->
        <button id="new-chat-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center">
            <i class="fas fa-plus mr-2"></i>新对话
        </button>
    </div>
    <!-- 对话列表容器，内容将通过JavaScript动态加载 -->
    <div class="flex-1 overflow-y-auto" id="conversations-list">
        <!-- 对话列表将通过JavaScript动态加载 -->
    </div>
</div>

<!-- 主聊天区域 -->
<div class="flex-1 flex flex-col">
    <!-- 聊天标题栏 -->
    <div class="p-3 border-b border-gray-700 flex items-center justify-between" id="chat-header">
        <!-- 当前对话标题 -->
        <h2 class="text-lg font-semibold" id="conversation-title">新对话</h2>
        <!-- 对话操作按钮组 -->
        <div class="flex space-x-2">
            <!-- 重命名对话按钮 -->
            <button id="rename-chat-btn" class="text-gray-400 hover:text-white p-1">
                <i class="fas fa-edit"></i>
            </button>
            <!-- 删除对话按钮 -->
            <button id="delete-chat-btn" class="text-gray-400 hover:text-red-400 p-1">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
    
    <!-- 消息区域，消息将通过JavaScript动态加载 -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4" id="messages-container">
        <!-- 消息将通过JavaScript动态加载 -->
        <!-- 欢迎消息 -->
        <div class="flex justify-center py-8" id="welcome-message">
            <div class="text-center text-gray-500 max-w-md">
                <i class="fas fa-robot text-4xl mb-4"></i>
                <h3 class="text-xl font-semibold mb-2">欢迎使用AI文本生成系统</h3>
                <p>开始一个新的对话或从左侧选择一个历史对话</p>
            </div>
        </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="p-3 border-t border-gray-700 bg-gray-800">
        <!-- 消息输入表单 -->
        <form id="message-form" class="flex items-end">
            <!-- 消息输入框 -->
            <div class="flex-1 bg-gray-700 rounded-lg p-2 mr-2">
                <textarea 
                    id="message-input" 
                    rows="1" 
                    placeholder="输入消息..." 
                    class="w-full bg-transparent outline-none resize-none max-h-32"
                ></textarea>
            </div>
            <!-- 发送消息按钮 -->
            <button 
                type="submit" 
                id="send-btn" 
                class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg flex items-center justify-center"
            >
                <i class="fas fa-paper-plane"></i>
            </button>
        </form>
    </div>
</div>

<!-- 重命名对话框 -->
<div id="rename-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
    <!-- 重命名对话框内容 -->
    <div class="bg-gray-800 rounded-lg p-4 w-96">
        <h3 class="text-lg font-semibold mb-3">重命名对话</h3>
        <!-- 重命名输入框 -->
        <input 
            type="text" 
            id="rename-input" 
            class="w-full bg-gray-700 rounded p-2 mb-4 outline-none" 
            placeholder="输入新标题"
        >
        <!-- 对话框操作按钮组 -->
        <div class="flex justify-end space-x-2">
            <!-- 取消重命名按钮 -->
            <button id="rename-cancel-btn" class="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600">取消</button>
            <!-- 确认重命名按钮 -->
            <button id="rename-confirm-btn" class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700">确认</button>
        </div>
    </div>
</div>
{% endblock %}

<!-- 引入页面所需的JavaScript脚本 -->
{% block scripts %}
<!-- 引入Markdown处理脚本 -->
<script src="{{ url_for('static', filename='js/markdown.js') }}"></script>
<!-- 引入服务器发送事件(SSE)处理脚本 -->
<script src="{{ url_for('static', filename='js/sse.js') }}"></script>
<!-- 引入应用主脚本 -->
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
{% endblock %}